<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>这是文件头部</title>
    <style>
        .cities{
            background-color: aqua;
            color: white;
            width: 220px;
        }
        #header{
            color: black;
            text-align: center;
            padding: 5px;
        }
        #nav{
            line-height:30px;
            height: 300px;
            width: 100px;
            float: left;
            padding: 5px;
        }
        #section{
            width: 350px;
            float: left;
            padding: 10px;
        }
        #footer{
            background-color: black;
            color: white;
            text-align: center;
        }
    </style>
</head>


<body style="background-color:yellowgreen">
    <div class="cities">
        <p>style的测试以及div块的测试</p>

    </div>
    <h1>    

        <a href="https://www.bilibili.com/" style="font-family:Arial, Helvetica, sans-serif ;color: blue;" target="_self">理论</a>
    </h1>
    <a href=mailto:1102304175@qq.com>邮箱</a>
    <img src="F:\图片\天空1.jpg"  width="200" height="200">
    <embed src="E:\Google下载\唧唧JJDown_v1.217.0\[WPF]JJDown\Download\音乐\治愈翻唱【我歌唱的理由有很多】 - 1.治愈翻唱【我歌唱的理由有很多】(Av887794686,P1).mp3"
    width="600" height="100"  > 

    </embed> 
    <marquee behavior="alternate" direction="right" loop="-1"> </marquee>

    <table border="1">
        <caption align="top">成绩单</caption>
        <tr align="left">
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>80</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>90</td>
        </tr>
    </table>

    <table border="1">
        <caption align="top" 收费表表</caption>
        <tr align="center" valign="middle" bgcolor=red>
            <td width="20%">收费项目</td>
            <td width="10%">时间</td>
            <td width="10%">价格</td>
            <td width="60%">备注</td>
        </tr>
        <tr align="center" valign="middle">
            <td width="20%">水上战船</td>
            <td width="10%">20分钟</td>
            <td width="10%">30元</td>
            <td width="60%" rowspan="4">超出单位时间部分，按照每十分钟计算，不足十分钟按照十分钟计算</td>
        </tr>
        <tr align="center" valign="middle">
            <td width="20%">水上自行车（单人）</td>
            <td width="10%">20分钟</td>
            <td width="10%">30元</td>
           
        </tr>
        <tr align="center" valign="middle">
            <td width="20%">水上自行车（双人）</td>
            <td width="10%">20分钟</td>
            <td width="10%">30元</td>
           
        </tr>
        <tr align="center" valign="middle">
            <td width="20%">水上滚筒</td>
            <td width="10%">20分钟</td>
            <td width="10%">30元</td>
           
        </tr>
        <tr align="center" valign="middle">
            <td width="20%">水上碰碰车</td>
            <td width="10%">20分钟</td>
            <td width="10%">30元</td>
            <td width="60%">不足十分钟按照十分钟计算</td>
        </tr>
    </table>


</body>

<body>
    <div id="header">
        <h1>世界杯</h1>

    </div>
    <div id="nav">
        <p>中国</p>
        <p>俄罗斯</p>
        德国<br>

    </div>

    <div id="section">
        <h2>俄罗斯</h2>
        <p>主办国</p>

    </div>
    <div id="footer">
        www.baidu.com
    </div>
    
    
</body>
<br>
<canvas id="mycanvas" width="200px" height="100px"></canvas>
    <script type="text/javascript">
    var c=document.getElementById("mycanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
    </script>
    <video src="E:\Google下载\唧唧JJDown_v1.217.0\[WPF]JJDown\Download\【4K60FPS】卢冠廷《一生所爱》神级现场！人生一定要看的现场！ - 1.一生所爱 4K 水印(Av418037886,P1).mp4"
            controls="controls" type="video/ogg">

    </video>


    <input name="add"  type="button" value="加法" onclick="sum(2,3)">
	
	<script>
	function  sum(one,two){
		var temp=one+two;
		return temp;
	}
	document.write("两数相加："+sum(2,3))
	</script>
</html>